<template>
  <div class="app-container">
    <div class="view-style">
      <div class="view-style-title">模版设置</div>
      <el-form
        :model="formInline"
        label-width="120px"
        label-position="left"
        class="demo-form-inline"
      >
        <el-form-item label="任务类型">
          <el-select v-model="formInline.taskModelLabel" style="width:320px" placeholder="任务类型">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务名称">
          <el-input v-model="formInline.taskModelName" style="width:320px" placeholder="任务名称" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="formInline.sort" v-blur style="width:320px" placeholder="排序" />
        </el-form-item>

      </el-form>
      <div class="transfer-div">
        <el-transfer
          v-model="transfervalue"
          :data="data"
          :titles="['工种', '12']"
          :props="{ key:'craftId',label:'craftName'}"
          :right-default-checked="multipleSelection"
          @change="handleChange"
        />
        <el-table
          :data="tableData"
          stripe
          border
          height="288"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="craftName" label="工种" width="380" align="left" />
          <el-table-column prop="name" label="预设工种单价（元）" width="180" align="center">
            <template slot-scope="scope">
              <div>
                <el-input v-model="scope.row.q" v-blur size="small" type="text" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="mini" icon="el-icon-delete" @click="removeList(scope.$index,scope.row)">移除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="view-style">
      <div class="view-style-title">任务设置</div>
      <div class="btns">
        <el-button @click="addTable">新增</el-button>
        <el-button @click="deleteRow('all')">批量删除</el-button>
      </div>
      <el-table
        :data="tableData2"
        stripe
        max-height="420"
        style="width: 100%;margin-top:20px"
        @selection-change="handleSelectionChange2"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="title" label="内容标题" width="180" align="center" />
        <el-table-column prop="dataType" label="内容类型" width="180" align="center" />
        <el-table-column label="是否必填" align="center">
          <template slot-scope="scope">
            <div>
              <el-tooltip :content="scope.row.isMust === 0? '非必填':'必填'" placement="top">
                <el-switch v-model="scope.row.isMust" :active-value="1" :inactive-value="0" />
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="itemSort" label="排序" width="180" align="center" />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <div>
              <el-tooltip :content="scope.row.isEnable === 0? '停用':'启用'" placement="top">
                <el-switch v-model="scope.row.isEnable" :active-value="1" :inactive-value="0" />
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <div>
              <el-button type="text" icon="el-icon-edit" size="small" @click.native.prevent="editRow(scope.row)" />
              <el-button type="text" icon="el-icon-delete" size="small" @click.native.prevent="deleteRow(1,scope.row)" />
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="save()">保存</el-button>
    </div>
    <!-- 弹窗 -->
    <dialogedit ref="dialogedit" :close.sync="dialogVisible" />
  </div>
</template>
<script>
const formInline = {
  appCode: '',
  appId: '',
  beginDate: '',
  craftIds: '',
  endDate: '',
  isValid: '',
  modelLevel: 0,
  nodeIds: '',
  nodeLevel: 0,
  opeId: '',
  orgId: '',
  parentId: '',
  price: 0,
  sort: '',
  taskModelLabel: '',
  taskModelName: '',
  unit: '',
  workHour: 0,
  workManualIds: ''
}
import { addTaskModel } from '@/api/task/taskModel'
import { getCraftTypeList } from '@/api/elec/crafttype'
import { getCustomerItemsListPage, removeCustomerItems, getCustomerItemsByid } from '@/api/product-ts/customer/items'
import dialogedit from './edit'
export default {
  components: {
    dialogedit
  },
  data() {
    return {
      data: [],
      transfervalue: [],
      formInline: Object.assign({}, formInline),
      multipleSelection: [],
      multipleSelection2: [],
      tableData2: [],
      dialogVisible: false
    }
  },
  computed: {
    tableData: function() {
      return this.data.filter(
        val => this.transfervalue.indexOf(val.craftId) !== -1
      )
    }
  },
  created() {
    this.gettable()
    getCraftTypeList({}).then(res => {
      this.data = res.data
    })
  },
  methods: {
    editRow(row) {
      this.dialogVisible = true
      const customerItemsId = row.itemId
      getCustomerItemsByid({ customerItemsId }).then(res => {
        this.$nextTick(() => {
          this.$refs.dialogedit.ruleForm = { ...res.data }
        })
      })
    },

    deleteRow(type, row) {
      if (type === 'all' && this.multipleSelection2.length === 0) {
        this.$message.warning('请至少选择一项删除')
        return
      }
      this.$confirm('此操作将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const customerItemsId = type === 'all' ? this.multipleSelection2.join() : row.itemId
        removeCustomerItems({ customerItemsId }).then(res => {
          this.$message.success(res.msg)
          this.gettable()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    gettable() {
      getCustomerItemsListPage({}).then(res => {
        this.tableData2 = res.data.list
      })
    },
    save() {
      const parmas = {
        ...this.formInline,
        craftIds: this.tableData.map(val => val.craftId)
      }
      addTaskModel(parmas).then(res => {
        this.$message.success(res.msg)
      })
    },
    addTable() {
      this.dialogVisible = true
    },
    handleChange(value, direction, movedKeys) {},
    handleSelectionChange(val) {
      this.multipleSelection = val.map(val => val.craftId)
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val.map(val => val.itemId)
    },
    removeList(index, row) {
      this.transfervalue.splice(index, 1)
    }
  }
}
</script>
<style lang="scss">
.transfer-div {
  display: flex;
  justify-content: space-between;
  .el-transfer {
    & > .el-transfer-panel:nth-child(3) {
      display: none;
    }
    .el-transfer-panel__item.el-checkbox {
      display: block;
    }
  }
}
</style>

<style lang="scss" scoped>
.view-style {
  width: 100%;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  .view-style-title {
    height: 40px;
  }
}
</style>

